<script lang="ts" setup>
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import { useSubPage } from './composables'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { useUserStore } from '@/stores'
const {
  navBarInfo,
  userInfo,
  loginHandle,
  navUserInfoPage,
  navCommonProblemPage,
  navMemberRightsPage,
  navOrderListPage,
  navbarInitFinishHandle,
  getData,
  list,
} = useSubPage()
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)
const userStore = useUserStore()
onReady(() => {})
onPageScroll((e) => {})
const toActivePage = async (item) => {
  console.log(userStore.getIfBindSn)
  tnNavPage(`/pages/typeStudy/en-answer?id=${item.id}&name=${item.name}`)
  // if (userStore.getIfBindSn) {
  // 	tnNavPage(`/home-page/typeStudy/en-answer?id=${item.id}&name=${item.name}`)
  // 	// await userStore.checkUserSn()
  // } else {
  // 	uni.showModal({
  // 		title: '设备未激活',
  // 		content: '学习英语需要长期坚持哦，超多权益等你来解锁',
  // 		confirmText: '立即激活',
  // 		cancelText: '放弃福利',
  // 		success: function (res) {
  // 			if (res.confirm) {
  // 				console.log('用户点击确定')
  // 				userStore.toScanMate()
  // 			} else if (res.cancel) {
  // 				console.log('用户点击取消')
  // 				tnNavPage('/pages/index/index', 'switchTab')
  // 			}
  // 		},
  // 	})
  // }
}
// //调起微信小程序扫码
// const toScanMate = () => {
//   uni.scanCode({
//     onlyFromCamera: true, // 默认false，true为只允许从相机扫码
//     success: async (res) => {
//       console.info(res) //打印出来，查看自己想要的返回结果数据
//       // 拿SN码去绑定设备
//       await userStore.toBindUserSn(res.result)
//     },
//   })
// }
</script>

<template>
  <TnNavbar
    fixed
    bg-color="#f1f5fb"
    :bottom-shadow="false"
    :placeholder="false"
    title="续费"
    @init-finish="navbarInitFinishHandle"
  >
    <view class="tn-color-black" style="font-size: 30rpx">场景练习</view>
  </TnNavbar>
  <!-- 顶部背景 -->
  <view class="top-bg" />
  <!-- 页面内容 -->
  <view class="page" :style="{ paddingTop: `${navBarInfo.height - 34}px` }">
    <view
      class="card-swiper"
      :circular="true"
      @click="tn('/pageA/navigation/navigation')"
      :autoplay="false"
      duration="500"
      interval="18000"
      @change="cardSwiper"
    >
      <view v-for="(item, index) in 1" :key="index" style="position: relative">
        <view class="swiper-item image-banner">
          <image
            src="https://cdn.nlark.com/yuque/0/2023/png/280373/1702622459812-assets/web-upload/f6850ebf-e261-4e67-9574-53c5c83def10.png"
            mode="aspectFit"
          ></image>
        </view>
        <view
          class="swiper-item2 image-banner"
          :style="'background-image:url(https://cdn.nlark.com/yuque/0/2024/png/280373/1706708394879-assets/web-upload/dd983175-8ab7-4a19-b698-cfebf4be0b85.png);background-size: cover;'"
        >
        </view>
        <!-- <view
          class="swiper-item3 image-banner"
          :style="'background-image:url(https://cdn.nlark.com/yuque/0/2024/png/280373/1706708143138-assets/web-upload/be40e441-03f1-42db-b0b3-cac416c859b4.png);background-size: cover;'"
        >
        </view> -->
        <view class="swiper-item-text">
          <view class="banner-box">
            <view class="tips-one">
              <view class="t1">HI~ </view>
              <view class="t2"
                >我是你的专属外教老师lily，和我一起练习英语场景吧</view
              >
            </view>
            <view class="tips-two">
              <view class="t1">情景自由聊</view>
              <view class="t2">每天口语10分钟，进阶口语达人</view>
            </view>
            <!-- <view class="text-sussuspension">
              <view
                class="tn-text-bold"
                style="font-size: 46rpx; color: #0e2d6d"
                >Hi,我是你的专属外教</view
              >
              <view
                class="tn-padding-top-xs"
                style="font-size: 26rpx; color: #0e2d6d; width: 80%"
              >
                Hi,我是你的专属外教老师LiLi,和我一起练习口语吧</view
              >
            </view>
            <view class="text-sussuspension mt-8">
              <view
                class="tn-text-bold"
                style="font-size: 46rpx; color: #0e2d6d"
                >情景自由聊</view
              >
              <view
                class="tn-padding-top-xs"
                style="font-size: 26rpx; color: #0e2d6d"
                >每天口语10分钟，进阶口语达人
              </view>
            </view> -->
          </view>
        </view>
        <!-- <view
          class="swiper-item-text-tips"
          style="position: absolute; right: 0; top: 64rpx"
        >
          <image
            src="https://cdn.nlark.com/yuque/0/2024/png/280373/1706708143138-assets/web-upload/be40e441-03f1-42db-b0b3-cac416c859b4.png"
          ></image>
        </view> -->
      </view>
    </view>
    <view class="listi-title"> 专题提升 ({{ list.length }}) </view>
    <view
      class="item-bar"
      v-for="(item, index) in list"
      :key="index"
      @click="toActivePage(item)"
    >
      <image :src="item.picture" class="left-head" mode="scaleToFill"></image>
      <view class="right-info">
        <view class="top_box">
          <view class="title">
            {{ item.name }}
          </view>
        </view>
        <text class="detail-text">{{ item.en_name }}</text>
      </view>
      <image
        v-if="item.isMem == 1"
        src="../../static/imgs/finish_icon.png"
        mode="widthFix"
        class="finish-icon-new"
      ></image>
    </view>
    <!-- <view
      class="tn-flex plr-12 ptb-16 tn-flex-wrap tn-padding-xs bg-color-white br-16"
    >
      <view
        class="special"
        v-for="(item, index) in list"
        :key="index"
        @click="toActivePage(item)"
      >
        <view
          class="tn-flex tn-flex-direction-column pl-12"
          style="
            height: 100%;
            color: #4473c8;
            border-radius: 28rpx;
            box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(52, 103, 194, 0.08);
          "
          :style="{ 'background-color': 'rgba' + item.bgColor }"
        >
          <view class="tn-text-lg tn-text-bold mt-12">
            <text
              class="tn-text-ellipsis font-size-16"
              :style="{ color: item.color }"
              >{{ item.name }}</text
            >
          </view>
          <view class="tn-text-xs tn-padding-top-xs mt-4">
            <text class="tn-text-ellipsis font-color-c999 font-size-12">{{
              item.enname
            }}</text>
          </view>
        </view>
        <image
          v-if="item.isMem == 1"
          src="../../static/imgs/finish_icon.png"
          mode="widthFix"
          class="finish-icon"
        ></image>
      </view>
    </view> -->
  </view>
</template>

<style lang="scss" scoped>
@import './styles/index.scss';

.banner-box {
  position: relative;

  .tips-one {
    position: absolute;
    left: 36rpx;
    top: 130rpx;
    width: 50%;

    .t1 {
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 48rpx;
      font-style: normal;
      text-transform: none;
    }

    .t2 {
      margin-top: 10rpx;
      width: 378rpx;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .tips-two {
    position: absolute;
    left: 60rpx;
    bottom: 78rpx;
    width: 50%;

    .t1 {
      height: 44rpx;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4b49e8;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding-left: 44rpx;
    }

    .t2 {
      width: 318rpx;
      height: 40rpx;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #6968c9;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}

.item-bar {
  display: flex;
  padding: 16rpx;
  font-family: 'tuniao-xiaowei';
  height: 152rpx;
  margin-bottom: 28rpx;
  background: #ffffff;
  border-radius: 22rpx;

  .left-head {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 30rpx;
    align-self: center;
  }

  .right-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: calc(100% - 170rpx);

    .top_box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-weight: bold;
        font-size: 28rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }

    .detail-text {
      font-size: 22rpx;
      margin: 6rpx 0;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    .bottom {
      font-size: 20rpx;
      color: #bebebe;
      display: flex;
      justify-content: space-between;
    }
  }
}

.listi-title {
  height: 48rpx;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 600;
  font-size: 32rpx;
  color: #070044;
  line-height: 48rpx;
  font-style: normal;
  text-transform: none;
  padding-left: 30rpx;
  margin-top: 48rpx;
  margin-bottom: 16rpx;
}

.finish-icon-new {
  width: 40rpx;
  margin-top: 42rpx;
}
</style>
